<template>
  <div class="min-h-screen bg-gray-100 p-6">
    <h1 class="text-3xl font-bold text-center mb-8">🎬 精选电影</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <router-link
        v-for="movie in movies"
        :key="movie.id"
        :to="`/movies/${movie.id}`"
        class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"
      >
        <img
          :src="movie.poster"
          :alt="movie.title"
          class="w-full h-64 object-cover"
        />
        <div class="p-4">
          <div class="flex justify-between items-center mb-2">
            <h2 class="text-lg font-semibold">{{ movie.title }}</h2>
            <span class="text-yellow-500 font-bold">{{ movie.rating }}</span>
          </div>
          <p class="text-sm text-gray-600 line-clamp-2">{{ movie.summary }}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Movie {
  id: number
  title: string
  poster: string
  rating: string
  summary: string
}

const movies = ref<Movie[]>([
  {
    id: 1,
    title: '星际穿越',
    poster: 'https://via.placeholder.com/300x400?text=Interstellar',
    rating: '8.6',
    summary: '一群探险者利用虫洞探索宇宙新家园的故事。'
  },
  {
    id: 2,
    title: '肖申克的救赎',
    poster: 'https://via.placeholder.com/300x400?text=Shawshank',
    rating: '9.3',
    summary: '希望是好事，也许是人间至善，而美好的事永不消逝。'
  },
  {
    id: 3,
    title: '阿甘正传',
    poster: 'https://via.placeholder.com/300x400?text=Forrest+Gump',
    rating: '8.8',
    summary: '一个智商只有75的人却影响了美国几十年的历史。'
  },
  {
    id: 4,
    title: '盗梦空间',
    poster: 'https://via.placeholder.com/300x400?text=Inception',
    rating: '8.8',
    summary: '通过梦境植入想法的高科技犯罪故事。'
  }
])
</script>